import { CSSRuleObject, styled } from "styledfc";
import Header from "./components/Header";
import Desc from "./components/Desc";
import Message from "./components/Message";
import img from "./img";
import { PositionCss, FlexCss } from "../../utils/styledfc";
import { useState, useEffect } from "react";
import { useParams } from "react-router-dom";
import { getDataById, getCollectState, toggleCollect, setWeb } from "@/api";
export interface AnimalType {
    id: string;
    name: string;
    img: string;
    desc: string;
    nation: string;
    life: string;
    characters: string;
    englishName: string;
}
export default function index() {
    const [hidden, setHidden] = useState(false);
    const [active, setActive] = useState(false);
    const [animal, setAnimal] = useState<AnimalType>({
        id: "",
        name: "",
        img: "",
        desc: "",
        nation: "",
        life: "",
        characters: "",
        englishName: "",
    });
    const { id } = useParams() as { id: string };
    function changeHidden(flag: boolean) {
        setHidden(flag);
    }
    async function changeActive() {
        setActive(!active);
        await toggleCollect(uid, id);
    }
    const uid = !!localStorage.getItem("pet-userInfo") ? JSON.parse(localStorage.getItem("pet-userInfo") as string).id : -1;
    useEffect(() => {
        const resetData = async () => {
            const [stateRes, dataRes] = (await Promise.all([getCollectState(uid, +id), getDataById(+id), setWeb(uid, +id)])) as [{ data: number }, { data: any[] }, { data: any }];
            stateRes.data === 1 && setActive(true);
            const { data } = dataRes;
            setAnimal({
                id: data[0].id,
                name: data[0].pet_name,
                img: data[0].pet_coverURL,
                desc: data[0].pet_desc,
                nation: data[0].pet_nation,
                life: data[0].pet_life,
                characters: data[0].pet_characters,
                englishName: data[0].pet_engName,
            });
        };
        resetData();
    }, [id]);
    return (
        <div className={indexStyle.className} style={{ overflow: hidden ? "hidden" : "auto", height: hidden ? "100vh" : "100%" }}>
            <Header img={animal.img} />
            <Desc item={animal} />
            <Message changeHidden={changeHidden} desc={animal.desc} nation={animal.nation} />
            <div onClick={changeActive} className={`index__collect ${active && "active"}`}>
                <img src={img.collect} />
            </div>
        </div>
    );
}
const indexStyle = styled({
    fontSize: "16rem",
    ".index__collect": {
        ...(PositionCss("fixed", { top: "66%", right: "20rem" }) as CSSRuleObject),
        height: "40rem",
        width: "40rem",
        borderRadius: "10rem",
        backgroundColor: "#ECEBEB",
        boxShadow: "0rem 4rem 11rem #ECEBEB, inset 0rem 4rem 11rem #ECEBEB",
        ...(FlexCss("center", "center") as CSSRuleObject),
        transition: ".3s",
        ">img": {
            height: "80%",
            width: "80%",
        },
        ":where(.active)": {
            backgroundColor: "#a1b275",
            boxShadow: "0rem 4rem 11rem #a1b275, inset 0rem 4rem 11rem #a1b275",
        },
    },
});
